<template>
  <div
    class="login_container"
    v-loading="loading"
    :element-loading-text="loadtext"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    style="width: 100%"
  >
    <div class="bj">
      <img id="bj" src="../../public/img/chengbao.jpg" />
    </div>
    <div class="login_box">
      <h1>
        <a href="/"></a>
      </h1>
      <form action id="loginform" onsubmit="return false;">
        <p class="in">
          <label for="user_login">username or Email Address</label>
          <input
            type="text"
            id="user_login"
            class="input"
            autocomplete="off"
            v-model="username"
            size="20"
          />
        </p>

        <p class="in">
          <label for="user_pass">Password</label>
          <input
            type="password"
            id="user_pass"
            class="input"
            autocomplete="off"
            v-model="password"
            size="20"
          />
        </p>
        <p class="forgetmenot in" style="color:#444;">
          Remember Me
          <el-switch
            v-model="value"
            active-color="rgb(238,156,167)"
            inactive-color="rgb(128,128,128)"
            class="reme"
          ></el-switch>
        </p>
        <p class="in submit">
          <button class="loginin" :plain="true" @click="login">Login in</button>
        </p>
      </form>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
// import cookies from "vue-cookies";
export default {
  data() {
    return {
      //记住我的初始化状态
      value: false,
      //账号
      username: "",
      //密码
      password: "",
      //加载动画
      loading: false,
      loadtext: "正在验证账号密码,请稍后...",
    };
  },
  created() {
    if (this.$cookies.isKey("cucc_loginInfo")) {
      this.username = this.$cookies.get("cucc_loginInfo").username;
      this.password = this.$cookies.get("cucc_loginInfo").password;
      this.value = true;
    } else {
      this.username = "";
      this.password = "";
      this.value = false;
    }
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userinfo,
      loginState: (state) => state.login.loginState,
    }),
  },
  methods: {
    ...mapMutations("login", ["updLoginState"]),
    ...mapMutations("user", ["setUserInfo"]),
    async login() {
      if (
        this.username.length < 2 ||
        this.username.length > 10 ||
        this.password.length < 5 ||
        this.password.length > 20
      ) {
        return this.$message.error({
          message: "用户名或密码格式错误",
        });
      } else {
        //1.显示加载中的动画
        this.loading = true;
        //2.根据用户输入向后台获取用户信息
        let loginform = { username: this.username, password: this.password };
        let isLogin = await this.getUserLoginInfo(loginform);
        //校验是否
        if (isLogin) {
          //成功
          //获取是否记住账号密码
          if (this.value) {
            //记住  将账号密码存储至localstorage
            this.$cookies.set("cucc_loginInfo", loginform, 60 * 60 * 12 * 7);
          } else {
            //清除cookies
            this.$cookies.remove("cucc_loginInfo");
          }
          //获取所有用户信息并存储至vuex
          let UserInfo = await this.getUserInfo();
          let info = {
            id: UserInfo.data.data[0]._id,
            username: UserInfo.data.data[0].username,
            birthday: UserInfo.data.data[0].birthday,
            email: UserInfo.data.data[0].email,
            iphone: UserInfo.data.data[0].iphone,
            motto: UserInfo.data.data[0].motto,
            sex: UserInfo.data.data[0].sex,
            password: UserInfo.data.data[0].password,
            token: UserInfo.data.data[0].token,
          };
          this.setUserInfo(info);
          //将token存储至sessionStorage
          window.sessionStorage.setItem(
            "Authorization",
            UserInfo.data.data[0].token
          );
          //修改登录状态信息
          this.updLoginState();
          //4.5跳转至首页
          setTimeout(() => {
            //5.失败
            //5.1取消加载动画
            this.loadtext = "登录成功,正在跳转页面...";
            this.loading = false;
            this.$router.push("/");
          }, 400);
        } else {
          setTimeout(() => {
            //5.失败
            //5.1取消加载动画
            this.loading = false;
            //5.2输出用户名或密码错误
            return this.$message.error({
              message: "用户名或密码输入错误!",
            });
          }, 500);
        }
      }
    },
    //调用登录api接口
    async getUserLoginInfo(loginform) {
      let isLogin = await this.$http.post("login", loginform);
      if (isLogin.data.code === 200) {
        return true;
      }
      return false;
    },
    //调用用户查询api接口
    async getUserInfo() {
      return await this.$http.get("userdataAll");
    },
  },
};
</script>

<style lang="less" scoped>
.login_container {
  height: 100%;
}

.login_box {
  width: 350px;
  height: 500px;
  background: rgba(231, 216, 214, 0.5);
  border-radius: 20px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -235px 0px 0px -175px;
}
.bj {
  // filter: blur(1px);
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

.bj > img {
  width: 100%;
  height: 100%;
}
.login_box > h1 > a {
  display: block;
  background: url("D:\\VSNode\\zblog\\public\\logo\\logo.png") no-repeat;
  height: 68px;
  width: 100%;
  background-size: contain;
  background-position: center top;
  margin: 0 auto 25px;
}
#loginform label {
  color: #585858;
}
#loginform .in {
  position: relative;
  padding: 0px 35px;
  margin-bottom: 20px;
}
#loginform .input {
  border: 1px solid #eaeaea;
  padding: 5px 10px;
  color: #444;
  background: #fff;
  font-size: 14px;
  font-weight: normal;
  box-shadow: 0 0 0px 1000px white inset;
  border-radius: 3px;
  height: 43px;
  margin-top: 10px;
  width: 100%;
}
.reme {
  float: right;
}
.submit > .loginin {
  width: 100%;
  margin: 10px auto;
  border: none;
  float: none;
  border-radius: 30px;
  height: 45px;
  font-size: 16px;
  text-align: center;
  color: #fff;
  background: #ee9ca7;
  font-weight: normal;
  cursor: pointer;
  box-shadow: none;
  text-shadow: none;
  letter-spacing: 2px;
}
.submit > .loginin:hover {
  background: #ee9ca7;
  color: #fff;
}
.submit > .loginin:link {
  background: #ee9ca7;
  color: #fff;
}
</style>
